<template>
    <div>
        <swiper :options="slideOption">
            <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
                Slide {{item}}
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
    export default {
        data() {
            return {
                slide: [1, 2, 3, 4, 5, 6],
                slideOption: {
                    loop: true, // 无限滚动【默认滑到最后一个就不能滑了】
                    pagination: {
                        el: '.swiper-pagination', // 分页器设置
                        clickable: true // 分页器可点击切换
                    }
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        }
    }
</script>

<style scoped>
.swiper-slide {
    height: 4rem;
    text-align: center;
    padding-top: 3rem;
    border-bottom: 1px solid #ccc;
}
</style>